<template>
  <div class="tablebox">
    <!-- {{ tablexsData }}{{ tablejsonxs }} -->
    <!-- v-if="tablejsonxs" -->
    <!-- {{ tablejsonxs }} -->
    <el-table
      v-loading="loading"
      :data="tablexsData"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="selection || delfalg"
        type="selection"
        width="55"
      />

      <el-table-column
        v-for="item in tablejsonxs"
        :key="item.value"
        :label="$z.$t(item.label)"
        min-width="100"
        :prop="item.value"
        :width="item.width ? item.width : ''"
      >
        <template #default="scope">
          <!-- {{ scope.row }} -->
          <tablecolumn :scope="{ row: scope.row, item }" />
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <div v-if="paginationfalg || delfalg" class="toolbar">
      <el-button
        v-if="delfalg"
        :disabled="selectdatas.length == 0"
        type="danger"
        @click="delfn"
      >
        {{ $z.$t('批量删除') }}
      </el-button>
      <div v-else></div>

      <el-pagination
        v-if="paginationfalg"
        :current-page="page"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="size"
        :page-sizes="[12, 50, 100, 200, 500]"
        style="margin: 0"
        :total="total"
        @current-change="pagefn"
        @size-change="sizefn"
      />
    </div>
  </div>
</template>

<script>
  import tablecolumn from '../tablecolumn'
  export default {
    name: 'Tablez',
    components: {
      tablecolumn,
    },
    props: {
      datajson: {
        type: Object,
        default: () => {
          return {}
        },
      },
      tablejson: {
        type: Array,
        default: () => {
          return []
        },
      },
      selection: {
        type: Boolean,
        default: false,
      },
      delfalg: {
        type: Boolean,
        default: false,
      },
      tabledata: {
        type: Array,
        default: () => {
          return []
        },
      },
      tablegetdatafalg: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['delfn'],
    data() {
      return {
        loading: false,
        size: 12,
        page: 1,
        tablexsData: [],
        selectdatas: [],
        imax: 0,
      }
    },
    asyncComputed: {
      async tablejsonxs() {
        this.loading = true
        let r = await this.$z.computedasynctable(
          this.$z.deepClone(this.tablejson),
          this.$z.deepClone(this.tabledata)
        )
        this.loading = false
        return r
      },
    },
    computed: {
      total() {
        if (this.tablegetdatafalg) {
          return this.imax
        } else {
          return this.tabledata.length
        }
      },
      paginationfalg() {
        if (this.tablegetdatafalg) {
          return this.imax >= 12 ? true : false
        } else {
          return this.tabledata.length >= 12 ? true : false
        }
      },
    },
    watch: {
      async tablexsData(ntabledata) {
        if (!this.tablejsonxs) {
          return
        }
        for (let index = 0; index < this.tablejsonxs.length; index++) {
          const json = this.tablejsonxs[index]
          if (json.type == 'pcs' && !this.tablejsonxs.callbackasync) {
            json.callbackasync = async (data) => {
              let r = await this.$store.dispatch(
                'station/getstationone',
                data.pcs
              )
              return r.length == 1 ? r[0].pcs : ''
            }
          }

          if (json.callbackasync) {
            for (let index = 0; index < ntabledata.length; index++) {
              const tabledata = ntabledata[index]
              if (!tabledata[Symbol.for(json.value)]) {
                json.callbackasync(tabledata, ntabledata).then(function (v) {
                  tabledata[Symbol.for(json.value)] = v
                })
              }
            }
          }
        }
      },
      tablegetdatafalg(n, o) {
        if (n != o) {
          this.updatafn()
        }
      },
      tabledata() {
        console.log(111111111111)
        this.updatafn()
      },
    },
    created() {},
    mounted() {
      this.updatafn()
    },
    methods: {
      async updatafn(pageedt = false) {
        if (!pageedt) {
          this.page = 1
        }
        if (this.tablegetdatafalg) {
          await this.imaxfn()
        }
        this.sizepagefn()
      },
      async imaxfn() {
        this.loading = true
        let imax = await this.$z.request(this.datajson.imaxurl)
        this.imax = imax.length == 1 ? imax[0].iMax : 0
        this.loading = false
      },
      handleSelectionChange(val) {
        this.selectdatas = val
      },
      delfn() {
        this.$emit('delfn', this.selectdatas)
      },

      pagefn(val) {
        this.page = val
        this.sizepagefn()
      },
      sizefn(val) {
        this.size = val
        this.sizepagefn()
      },
      setloadingfn(loading) {
        this.loading = loading
      },
      async sizepagefn() {
        this.loading = true
        this.tablexsData = []
        if (this.tablegetdatafalg) {
          let csta = this.size * (this.page - 1)
          let tableData = await this.$store.dispatch(this.datajson.searchurl, {
            ...this.datajson.defaultdata,
            csta,
            cmax: this.size,
          })
          this.tablexsData = this.$z.deepClone(tableData)
        } else {
          this.tablexsData = this.$z.deepClone(
            this.tabledata.slice(
              this.size * (this.page - 1),
              this.size * this.page
            )
          )
        }
        this.loading = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/base.scss';
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin: 10px 0;
  }
  .tablebox {
    display: flex;
    flex-direction: column;
  }
</style>
